{% extends "layout.html" %}
{% block body %}
<div class="amz-banner">
    <div class="am-scrollspy-init am-scrollspy-inview " style="padding-top:36px;padding-bottom:36px;color:white;background-color:#00BFFF">
  <div class="am-container" style="margin: 0 auto; text-align: center">
      <img src="{{url_for('static',filename='./img/syzoj-logo.png')}}" style="height:125px">
      <h1 style="margin-top:5px;margin-bottom:6px;font-size:30px;font-weight:360">编辑题目</h1>
      <ruby style="font-size:10px">纸上得来终觉浅<rt>Have fun Okay~</rt>,绝知此事要躬行</ruby>
</div>
    </div>
        </div>
    </div>
</div>
    <br>
<style type="text/css">
    .problem-header{
    text-align: center;
    }
    .am-panel-title{
    font-size: 1.6em;
    }
</style>
<div class="am-container am-g">
    {% if problem %}
        {% set problem_id=problem.id %}
    {% else %}
        {% set problem_id=0 %}
    {% endif %}
    <form class="am-form" method="post" action="{{url_for('edit_problem',problem_id=problem_id)}}">
        <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf">
                <li class="am-active" id="edit">
                    <a href="#">编辑</a>
                </li>
                <li class="" id="preview">
                    <a href="#">预览</a>
                </li>
            </ul>
            <div class="am-tabs-bd" data-am-tabs="{noSwipe: 1}">
                <div class="am-tab-panel am-active" id="edit-panel">
                    <fieldset>
                        <div class="am-form-group">
                            <label for="doc-ds-ipt-1">题目名称</label>
                            <input type="text" class="am-form-field" id="title" name="title"
                                   value="{% if problem %}{{problem.title}}{% endif %}">
                        </div>

                        <div class="am-form-group">
                            <label>题目描述</label>
                            <textarea class="" rows="5" id="description" name="description">{% if problem %}{{problem.description}}{% endif %}</textarea>
                        </div>

                        <div class="am-form-group">
                            <label>输入格式</label>
                            <textarea class="" rows="5" id="input" name="input_format">{% if problem %}{{problem.input_format}}{% endif %}</textarea>
                        </div>

                        <div class="am-form-group">
                            <label>输出格式</label>
                            <textarea class="" rows="5" id="output" name="output_format">{% if problem %}{{problem.output_format}}{% endif %}</textarea>
                        </div>

                        <div class="am-form-group">
                            <label>样例</label>
                            <textarea class="" rows="5" id="example" name="example">{% if problem %}{{problem.example}}{% endif %}</textarea>
                        </div>
                        <div class="am-form-group">
                            <label>标签列表，请用英文逗号(,)隔开题目编号，如：1,3,5</label>
                            <input type="text" id="tags" name="tags"
                                value="{% if problem %}{{ problem.tags.replace('|', ',') }}{% endif %}">
                        </div>
                        <div class="am-form-group">
                            <label>数据范围与提示</label>
                            <textarea class="" rows="5" id="hint" name="limit_and_hint">{% if problem %}{{problem.limit_and_hint}}{% endif %}</textarea>
                        </div>
                    </fieldset>
                </div>

                <div class="am-tab-panel" id="preview-panel">
                    <h1 class="problem-header" id="pv-title"></h1>

                    <div class="am-panel-hd"><h3 class="am-panel-title big">题目描述</h3></div>
                    <div class="am-panel-bd" id="pv-description"></div>
                    <div class="am-panel-hd"><h3 class="am-panel-title">输入格式</h3></div>
                    <div class="am-panel-bd" id="pv-input"></div>
                    <div class="am-panel-hd"><h3 class="am-panel-title">输出格式</h3></div>
                    <div class="am-panel-bd" id="pv-output"></div>
                    <div class="am-panel-hd"><h3 class="am-panel-title">测试样例</h3></div>
                    <div class="am-panel-bd" id="pv-example"></div>
                    <div class="am-panel-hd"><h3 class="am-panel-title">数据范围与提示</h3></div>
                    <div class="am-panel-bd" id="pv-hint"></div>
                </div>
            </div>
        </div>
        <button type="submit" class="am-btn am-btn-default">提交</button>
    </form>
</div>
{% endblock %}

{% block script %}
<!-- KaTex -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.js"></script>
<!-- KaTex autoRender -->
<script src="{{ url_for('static', filename='auto-render.js') }}"></script>

<script src="{{ url_for('static', filename='marked.js') }}"></script>
<script type="text/javascript">
function render(output,input){
    output.html(marked(input.val()));
}
$("#preview").click(function(){
    $("#pv-title").text($("#title").val());
    render($("#pv-description"),$("#description"));
    render($("#pv-input"),$("#input"));
    render($("#pv-output"),$("#output"));
    render($("#pv-example"),$("#example"));
    render($("#pv-hint"),$("#hint"));
    renderMathInElement(document.getElementById("preview-panel"));
});

</script>
{% endblock %}
